<template>
  <u-popup
    :show="visible"
    mode="center"
    :round="20"
  >
    <view class="flex flex-y medal-wrap">
      <u--image
        src="/static/mine/bg_medal_tips.png"
        width="600rpx"
        height="700rpx"
        radius="20rpx"
      ></u--image>
      <view class="medal-content flex flex-y flex-center">
        <u--image
          :src="medalInfo.lightUpIcon"
          width="160rpx"
          height="160rpx"
          mode="aspectFit"
        ></u--image>
        <view class="medal-name">{{ medalInfo.name }}</view>
        <view class="medal-desc flex flex-y">
          <view class="description">{{ medalInfo.description }}</view>
          <view class="tips">{{ medalInfo.tips }}</view>
        </view>
        <view
          class="sure-btn"
          @click="close"
        >
          知道了
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      value: false,
    },
    medalInfo: {
      type: Object,
      value: () => {},
    },
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  methods: {
    close() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
::v-deep .u-icon__icon {
  font-size: 30rpx !important;
}
.medal-wrap {
  position: relative;
  .medal-content {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 80rpx;
    .medal-name {
      font-size: #333333;
      font-size: 32rpx;
      font-weight: 600;
      margin-top: 16rpx;
    }
    .medal-desc {
      background-color: #f5f5f5;
      border-radius: 24rpx;
      padding: 24rpx;
      margin: 36rpx 0 20rpx 0;
      text-align: center;
      .description {
        font-size: 24rpx;
        color: #333;
      }
      .tips {
        font-size: 20rpx;
        color: #afafaf;
        margin-top: 24rpx;
      }
    }
    .sure-btn {
      height: 80rpx;
      border-radius: 40rpx;
      line-height: 80rpx;
      background-color: $btn-primary-color;
      width: 400rpx;
      color: #333;
      font-size: 28rpx;
      text-align: center;
      margin-top: 80rpx;
      font-weight: 500;
    }
  }
}
</style>
